<script lang="ts" setup>
import { Modal } from 'ant-design-vue';

defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();
</script>

<template>
  <Modal
    :open="visible"
    title="📋 资源模板使用场景示例与操作指南"
    width="1200px"
    :footer="null"
    @cancel="emit('update:visible', false)"
  >
    <div class="template-usage-guide">
      <div class="guide-header">
        <p class="guide-subtitle">
          详细的操作步骤和配置说明，帮助您快速上手资源模板管理
        </p>
      </div>

      <!-- 操作流程说明 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔄 标准操作流程</h3>
        </div>
        <div class="section-content">
          <ol class="process-list">
            <li>创建模板 → 配置属性 → 版本管理 → 应用到资源</li>
            <li>在资源分类管理中关联模板到分类</li>
            <li>在调度规则管理中设置模板的调度规则</li>
            <li>监控模板使用情况，定期更新版本</li>
          </ol>
        </div>
      </div>

      <!-- 酒店业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🏨 酒店业态 - 标准客房模板配置</h3>
        </div>
        <div class="section-content hotel-example">
          <div class="config-section">
            <h4>📝 模板基本信息配置</h4>
            <ul>
              <li>模板名称：标准客房模板</li>
              <li>模板编码：STANDARD_ROOM_TEMPLATE</li>
              <li>模板类型：物理资源</li>
              <li>版本号：1.0.0</li>
              <li>描述：适用于酒店标准客房的资源配置模板</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>⚙️ 资源配置属性</h4>
            <ul>
              <li>房间类型：标准间</li>
              <li>容纳人数：2人</li>
              <li>房间面积：25-30㎡</li>
              <li>基础设施：床、电视、空调、卫生间</li>
              <li>服务等级：标准服务</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联分类：客房资源分类</li>
              <li>调度规则：标准客房调度规则</li>
              <li>权限设置：前台可查看，客房部可管理</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增模板" → 填写基本信息 → 保存</li>
              <li>点击"版本"按钮 → 创建新版本 → 配置资源属性</li>
              <li>点击"应用"按钮 → 选择客房资源 → 应用模板</li>
              <li>在分类管理中关联到"客房资源分类"</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 温泉洗浴业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>♨️ 温泉洗浴业态 - 温泉池模板配置</h3>
        </div>
        <div class="section-content spa-example">
          <div class="config-section">
            <h4>📝 模板基本信息配置</h4>
            <ul>
              <li>模板名称：温泉池模板</li>
              <li>模板编码：HOT_SPRING_POOL_TEMPLATE</li>
              <li>模板类型：物理资源</li>
              <li>版本号：1.0.0</li>
              <li>描述：适用于温泉池的资源配置和监控模板</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>⚙️ 资源配置属性</h4>
            <ul>
              <li>池子类型：室内/户外温泉池</li>
              <li>容纳人数：10-20人</li>
              <li>水温控制：38-42℃</li>
              <li>水质监控：pH值、余氯、浊度</li>
              <li>配套设施：更衣室、淋浴、休息区</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联分类：温泉资源分类</li>
              <li>调度规则：温泉池调度规则</li>
              <li>权限设置：温泉部可管理，前台可查看</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增模板" → 填写基本信息 → 保存</li>
              <li>点击"版本"按钮 → 创建新版本 → 配置温泉池属性</li>
              <li>点击"应用"按钮 → 选择温泉池资源 → 应用模板</li>
              <li>在分类管理中关联到"温泉资源分类"</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 餐饮业态详细示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🍽️ 餐饮业态 - 包间服务模板配置</h3>
        </div>
        <div class="section-content dining-example">
          <div class="config-section">
            <h4>📝 模板基本信息配置</h4>
            <ul>
              <li>模板名称：包间服务模板</li>
              <li>模板编码：PRIVATE_ROOM_TEMPLATE</li>
              <li>模板类型：服务资源</li>
              <li>版本号：1.0.0</li>
              <li>描述：适用于餐厅包间的服务配置模板</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>⚙️ 资源配置属性</h4>
            <ul>
              <li>包间类型：小包间/中包间/大包间</li>
              <li>容纳人数：4-12人</li>
              <li>服务标准：专人服务、专属菜单</li>
              <li>设施配置：独立空调、音响、投影</li>
              <li>收费标准：按小时或按餐次收费</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联分类：餐饮资源分类</li>
              <li>调度规则：包间预订规则</li>
              <li>权限设置：餐饮部可管理，前台可预订</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增模板" → 填写基本信息 → 保存</li>
              <li>点击"版本"按钮 → 创建新版本 → 配置包间属性</li>
              <li>点击"应用"按钮 → 选择包间资源 → 应用模板</li>
              <li>在分类管理中关联到"餐饮资源分类"</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 技术资源示例 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>🔧 技术资源 - 表单模板配置</h3>
        </div>
        <div class="section-content tech-example">
          <div class="config-section">
            <h4>📝 模板基本信息配置</h4>
            <ul>
              <li>模板名称：客户信息表单模板</li>
              <li>模板编码：CUSTOMER_FORM_TEMPLATE</li>
              <li>模板类型：技术资源</li>
              <li>版本号：1.0.0</li>
              <li>描述：通用客户信息收集表单模板</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>⚙️ 资源配置属性</h4>
            <ul>
              <li>表单类型：客户信息收集</li>
              <li>字段配置：姓名、电话、邮箱、地址</li>
              <li>验证规则：必填项、格式验证</li>
              <li>样式主题：响应式设计、品牌色彩</li>
              <li>数据存储：数据库表结构</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>🔗 关联配置</h4>
            <ul>
              <li>关联分类：技术资源分类</li>
              <li>调度规则：表单访问规则</li>
              <li>权限设置：开发人员可编辑，用户可填写</li>
            </ul>
          </div>
          <div class="config-section">
            <h4>📋 操作步骤</h4>
            <ol>
              <li>点击"新增模板" → 填写基本信息 → 保存</li>
              <li>点击"版本"按钮 → 创建新版本 → 配置表单字段</li>
              <li>点击"应用"按钮 → 选择表单资源 → 应用模板</li>
              <li>在分类管理中关联到"技术资源分类"</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 最佳实践总结 -->
      <div class="guide-section">
        <div class="section-header">
          <h3>💡 最佳实践与使用技巧</h3>
        </div>
        <div class="section-content best-practices">
          <div class="practice-section">
            <h4>🎯 模板设计原则</h4>
            <ul>
              <li><strong>通用性</strong>：模板要具有通用性，便于跨业务复用</li>
              <li><strong>可配置性</strong>：支持灵活配置，适应不同场景需求</li>
              <li><strong>标准化</strong>：遵循统一的标准，确保一致性</li>
              <li><strong>可扩展性</strong>：支持版本管理，便于后续扩展</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>⚙️ 版本管理技巧</h4>
            <ul>
              <li>
                <strong>语义化版本</strong>：使用主版本.次版本.修订版本格式
              </li>
              <li><strong>变更记录</strong>：详细记录每次版本变更内容</li>
              <li><strong>向后兼容</strong>：新版本尽量保持向后兼容</li>
              <li><strong>回滚机制</strong>：支持快速回滚到历史版本</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>🔧 应用策略</h4>
            <ul>
              <li><strong>批量应用</strong>：一次性应用到多个相似资源</li>
              <li><strong>增量更新</strong>：只更新变更的部分，减少影响</li>
              <li><strong>测试验证</strong>：应用前进行充分测试验证</li>
              <li><strong>监控反馈</strong>：应用后监控效果，收集反馈</li>
            </ul>
          </div>
          <div class="practice-section">
            <h4>📊 维护与优化</h4>
            <ul>
              <li><strong>定期检查</strong>：定期检查模板使用情况和效果</li>
              <li><strong>性能优化</strong>：优化模板配置，提升执行效率</li>
              <li><strong>用户培训</strong>：培训用户正确使用模板功能</li>
              <li><strong>持续改进</strong>：根据使用反馈持续改进模板</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
.template-usage-guide {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
}

.guide-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.guide-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.guide-section {
  margin-bottom: 24px;
  background: #fafafa;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #e8e8e8;
}

.section-header h3 {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 12px;
  border-left: 3px solid #1890ff;
  padding-left: 8px;
}

.section-content {
  color: #262626;
  line-height: 1.5;
}

.process-list {
  padding-left: 16px;
}

.process-list li {
  margin-bottom: 6px;
  color: #595959;
}

.config-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

.config-section h4 {
  color: #1890ff;
  margin-bottom: 8px;
  font-size: 14px;
}

.config-section ul {
  margin: 0;
  padding-left: 16px;
}

.config-section li {
  margin-bottom: 4px;
  color: #595959;
  font-size: 13px;
}

.config-section ol {
  margin: 0;
  padding-left: 16px;
}

.config-section ol li {
  margin-bottom: 6px;
  color: #595959;
  font-size: 13px;
}

.practice-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  border-left: 3px solid #faad14;
}

.practice-section h4 {
  color: #1890ff;
  margin-bottom: 8px;
  font-size: 14px;
}

.practice-section ul {
  margin: 0;
  padding-left: 16px;
}

.practice-section li {
  margin-bottom: 6px;
  color: #595959;
  font-size: 13px;
}

.practice-section strong {
  color: #1890ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-section {
    padding: 12px;
  }

  .section-header h3 {
    font-size: 14px;
  }

  .config-section {
    padding: 8px;
  }

  .config-section h4 {
    font-size: 13px;
  }

  .config-section li {
    font-size: 12px;
  }
}
</style>
